<template>
  <div class="box_e" style="position: relative">
    <!-- <div class="carousel-today" style="color: hsl(197, 98%, 65%)">{{ today }}</div> -->
    <div class="carousel-wrapper" v-if="noticeListData.length">
      <vue-seamless-scroll :data="noticeListData" :class-option="optionSetting" style="height: 100%; overflow: hidden">
        <ul class="item" style="list-style: none; padding: 0px; margin: 0px">
          <li
            v-for="(item, index) in noticeListData"
            :key="index"
            :data-index="index"
            style="padding: 0px; margin: 0px; font-size: small; list-style: none; text-align: left; line-height: 26px"
          >
            <div
              v-if="index % 2 == 0"
              style="
                height: 100%;
                width: 100%;
                padding: 6px;
                border-bottom: 1px solid rgb(170, 221, 255, 0.15);
                box-shadow: 0;
                font-size: 18px;
              "
            >
              <span
                style="color: rgb(170, 221, 255); padding: 2px 4px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListName[index] }}
              </span>
              <span
                style="color: rgb(170, 221, 255); padding: 0 20px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ item }}
              </span>
              <span
                style="color: #fff; padding: 2px 4px; float: right"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListNum[index] }}
              </span>
            </div>
            <div
              v-else
              style="
                height: 100%;
                width: 100%;
                padding: 6.5px;
                border-bottom: 1px solid rgb(170, 221, 255, 0.15);
                box-shadow: 0;
                font-size: 18px;
              "
            >
              <span
                style="color: rgb(170, 221, 255); padding: 2px 4px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListName[index] }}
              </span>
              <span
                style="color: rgb(170, 221, 255); padding: 0 20px"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ item }}
              </span>
              <span
                style="color: #fff; padding: 2px 4px; float: right"
                :data-index="index"
                :style="{ cursor: item.showDetailBtn ? 'pointer' : null }"
              >
                {{ noticeListNum[index] }}
              </span>
            </div>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <div v-else class="flex flex-center" style="height: 100%; color: #ccc">
      <span>暂无数据</span>
    </div>
    <!-- <div style="color: #087acf; opacity: 0.9; height: 100%; overflow: hidden">
    </div> -->
  </div>
</template>
<script>
import VueSeamlessScroll from '@/utils/vueSeamlessScroll/vue-seamless-scroll.min.js'
import dayjs from 'dayjs'
export default {
  components: {
    VueSeamlessScroll
  },
  name: 'box-right-e',
  data() {
    return {
      // 消息提示滚动配置
      optionSetting: {
        step: 0.25,
        limitMoveNum: 7,
        openTouch: false,
        waitTime: 1,
        singleHeight: 10
      },
      today: dayjs().format('YYYY-MM-DD'),
      titlename: '本日应发货',
      noticeListName: [
        'FH',
        'FH',
        'FH',
        'FN',
        'FN',
        'FN',
        'FN',
        'FN',
        'FN',
        'FN',
        'LDX',
        'VER',
        'VER',
        'VER',
        'VER',
        'VER',
        'VER',
        'VER',
        'VER',
        'VER',
        'HF'
      ],
      noticeListData: [
        '福建省...工业园 2134321-OB9GBO03',
        '湖北省...物流园	        2094452-OKDNXX-1L1',
        '湖北省...3号仓库	        2094452-OKDRXX-1L1',
        '江苏省...路702号	        2094452-OKD2XX-1L1',
        '20801Bisca...,USA	58NAG-G77KBE5800001',
        'Piso9...CiudaddeMexico	58Q7G-WG70040028008',
        '北京市...路6号	        5QG000002-M1560011H',
        '广东省...大道221号	5P4000008-M0140022H',
        '河北省...6号楼1309	5P4000008-M2140913H',
        '江苏省...南区	        5N7000017-M3100892X',
        '北京市...东区门南	99-HTD2K01-ZY14',
        '安徽省...银行卡中心	1600240067',
        '北京市...二单元902	1600252102',
        '辽宁省...农业银行	1600252102',
        '辽宁省...28号甲  	1600070101',
        '马来西亚       	        1600160102',
        '内蒙古...临河区        	1600070101',
        '山东省...舜风路1006号	1600252071',
        '台湾	                1600252018',
        '浙江省...2单元704室	1600252102',
        'WVER-1080030024	FPC座'
      ],
      noticeListNum: [
        ' 600台',
        ' 1300台',
        ' 2800台',
        ' 5000台',
        ' 10000台',
        ' 5000台',
        ' 30000台',
        ' 340台',
        ' 200台',
        ' 100台',
        ' 300台',
        ' 300台',
        ' 1000台',
        ' 100台',
        ' 300台',
        ' 450台',
        ' 1091台',
        ' 100台',
        ' 230台',
        ' 280台',
        ' 1000台'
      ]
    }
  },
  methods: {},
  watch: {}
}
</script>

<style scoped>
@charset "UTF-8";
.box_e {
  height: 280px;
  overflow: hidden;
}

.carousel-today {
  position: absolute;
  top: -15px;
  right: 16px;
  color: #a2e8ff;
}

.carousel-wrapper {
  padding: 8px;
}
.carousel-wrapper li {
  padding: 8px;
  margin-bottom: 8px;
  display: flex;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.carousel-wrapper .title {
  font-size: 14px;
  font-family: '微软雅黑';
  color: #303133;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.carousel-wrapper .title:hover {
  color: #1890ff;
}
.carousel-wrapper .more {
  font-size: 12px;
  color: #4a92d4ec;
  flex: 0 0 52px;
  text-align: right;
  margin-right: -8px;
  cursor: pointer;
}
.carousel-wrapper .more:hover {
  color: #1890ff;
  font-weight: 600;
}
</style>
